<template>
  <div class="app-container">
    <el-form
      ref="settingform"
      :model="settingform"
      :rules="rules"
      label-width="130px"
    >
      <el-row>
        <el-col :span="6" style="">
          <el-form-item label="是否启用充值规则">
            <el-checkbox-group v-model="cardOilsTypeList">
              <el-checkbox
                v-for="item in checkList"
                :key="item.id"
                :label="item.id"
                :value="item.value"
                >{{ item.value }}</el-checkbox
              >
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" style="">
          <el-button type="primary" style="" @click="handleAdd"
            >新增充值规则</el-button
          >
        </el-col>
      </el-row>
      <div>
        <el-table :data="settingform.detailList">
          <el-table-column label="id" align="left" prop="id" v-if="false" />
          <el-table-column
            label="所对应电子会员卡ID"
            align="left"
            prop="parentId"
            v-if="false"
          />
          <el-table-column
            label="油品"
            align="left"
            prop="oilName"
            :formatter="oilNameFormatter"
          />
          <el-table-column
            label="优惠条件金额"
            align="left"
            prop="discountAmtTerm"
          >
            <template slot-scope="scope1">
              {{ scope1.row.discountAmtStart }}≤充值金额(元)&lt;{{
                scope1.row.discountAmtEnd
              }}
            </template>
          </el-table-column>
          <el-table-column
            label="赠送方式"
            align="left"
            prop="settingRuleType"
            :formatter="settingRuleTypeFotmat"
          />
          <el-table-column
            label="赠送金额值或比例"
            align="left"
            prop="presentAmt"
          >
            <template slot-scope="scope2">
              {{ scope2.row.presentAmt }}
              <span v-show="scope2.row.settingRuleType == '1'">元</span>
              <span v-show="scope2.row.settingRuleType == '2'">%</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="left"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-edit"
                @click="handleUpdate(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-form-item label="充值活动设置"> </el-form-item>
      <el-form-item>
        <el-radio-group v-model="settingform.discountTimeSetting">
          <el-radio
            v-for="dict in discountTimeSettingOptions"
            :key="dict.dictValue"
            :label="dict.dictValue"
            >{{ dict.dictLabel }}</el-radio
          >
        </el-radio-group>
      </el-form-item>
      <el-row>
        <el-col :span="8" style="">
          <el-form-item label="周期选择">
            <el-select
              v-model="settingform.discountTimeType"
              clearable
              size="mini"
              @change="datePickerChang"
            >
              <el-option
                v-for="item in discountTimeTypeOptions"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item v-show="workDaytrue">
            <div
              style="
                display: flex;
                flex-wrap: wrap;
                border-style: solid;
                border-color: #f5f7fa;
              "
            >
              <div
                v-for="(item, index) in workDay"
                :key="index"
                style="margin: 3px"
              >
                <div
                  class="hover-style"
                  style="
                    border-radius: 5px;
                    font-weight: bold;
                    font-size: 12px;
                    cursor: pointer;
                  "
                  @click="clickWorkDayCalendar(item, index)"
                >
                  <div>{{ item }}</div>
                  <div
                    v-if="collectClickWorkDay.indexOf(index) > -1"
                    style="
                      width: 4px;
                      height: 4px;
                      border-radius: 50%;
                      background-color: red;
                      position: relative;
                      left: calc(50% - 2px);
                    "
                  ></div>
                  <div v-else style="width: 4px; height: 4px"></div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-show="moonDaytrue">
            <div
              style="
                display: flex;
                flex-wrap: wrap;
                border-style: solid;
                border-color: #f5f7fa;
              "
            >
              <div
                v-for="(item, index) in moonEverDay"
                :key="index"
                style="margin: 3px"
              >
                <div
                  class="hover-style"
                  style="
                    border-radius: 5px;
                    font-weight: bold;
                    font-size: 12px;
                    cursor: pointer;
                  "
                  @click="clickCalendar(item, index)"
                >
                  <div>{{ item }}</div>
                  <div
                    v-if="collectClickCalendar.indexOf(index) > -1"
                    style="
                      width: 4px;
                      height: 4px;
                      border-radius: 50%;
                      background-color: red;
                      position: relative;
                      left: calc(50% - 2px);
                    "
                  ></div>
                  <div v-else style="width: 4px; height: 4px"></div>
                </div>
              </div>
            </div>
          </el-form-item>
          <el-form-item v-show="datetrue">
            <el-date-picker
              clearable
              size="small"
              style="margin-left: 10px; width: 200px"
              v-model="pickerTime"
              type="dates"
              value-format="yyyy-MM-dd"
              placeholder="选择提醒时间设置"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="赠送比例" prop="presentScale">
            <el-input
              v-model="settingform.presentScale"
              placeholder="请输入赠送比例"
              style="width: 70px"
            />%
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="叠加优惠设置"></el-form-item>
      <el-row style="margin-left: 80px">
        <el-col :span="8">
          <el-form-item prop="isDiscountCoupon" label="是否叠加优惠券">
            <el-radio-group v-model="settingform.isDiscountCoupon">
              <el-radio
                v-for="dict in isDiscountCouponOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="isMarket" label="是否叠加营销方案">
            <el-radio-group v-model="settingform.isMarket">
              <el-radio
                v-for="dict in isDiscountCouponOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="isGradeSetting" label="是否叠加等级优惠">
            <el-radio-group v-model="settingform.isGradeSetting">
              <el-radio
                v-for="dict in isDiscountCouponOptions"
                :key="dict.dictValue"
                :label="dict.dictValue"
                >{{ dict.dictLabel }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" style="margin-left: 80px">
          <el-form-item
            prop="isDiscountCoupon"
            label="电子卡支付产生积分可享受倍数"
            label-width="225px"
          >
            <el-input
              v-model="settingform.enjoyIntegralMultiple"
              placeholder="请输入积分可享受倍数"
              style="width: 100px"
            />倍
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>

    <!-- 添加或修改客户电子会员卡充值优惠设置明细对话框 -->
    <el-dialog :title="title" :visible.sync="open" append-to-body>
      <el-form
        ref="infoform"
        :model="infoform"
        :rules="rules"
        label-width="110px"
      >
        <el-form-item label="选择油品">
          <el-select
            v-model="infoform.oilName"
            placeholder="请选择油品"
            clearable
            size="small"
          >
            <el-option
              v-for="item in oilOptions"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="充值条件金额" prop="discountAmtTerm">
          <el-input-number
            v-model="infoform.discountAmtStart"
            placeholder="请输入充值条件开始金额"
            style="width: 200px"
          />
          <span>≤充值金额(元)&lt;</span>
          <el-input-number
            v-model="infoform.discountAmtEnd"
            placeholder="请输入充值条件结束金额"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="赠送方式"></el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item>
              <el-select
                v-model="infoform.settingRuleType"
                placeholder="请选择赠送方式"
                @change="settingRuleTypeChange"
              >
                <el-option
                  v-for="item in settingRuleTypeOptions"
                  :key="item.dictLabel"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-input v-model="infoform.presentAmt" style="width: 100px" />
              <span v-show="jine">元</span>
              <span v-show="bili">%</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <span style="color: red; margin-left: 90px"
            >例：按赠送金额：充100赠送10元;按赠送比例：充100赠送10%</span
          >
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save">设置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  addSetting,
  updateSetting,
  selectCustomerCardSetting,
} from "@/api/customer/cardSetting";
export default {
  name: "Setting",
  data() {
    return {
      // 总条数
      total: 0,
      oilOptions: [],
      isDiscountCouponOptions: [],
      discountTimeSettingOptions: [],
      collectClickCalendar: [], // 收集固定日期选择的日子
      collectClickWorkDay: [],
      discountTimeTypeOptions: [],
      settingRuleTypeOptions: [],
      checkList: [
        { id: "1", value: "汽油" },
        { id: "2", value: "柴油" },
      ],
      cardOilsTypeList: [],
      pickerTime: "",
      moonEverDay: [
        "01",
        "02",
        "03",
        "04",
        "05",
        "06",
        "07",
        "08",
        "09",
        "10",
        "11",
        "12",
        "13",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30",
        "31",
      ],
      workDay: ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
      workDaytrue: false,
      moonDaytrue: false,
      datetrue: false,
      jine: false,
      bili: false,
      // 弹出层标题
      title: "",
      // 表单参数
      settingform: {
        detailList: [],
      },
      //判断保存次数
      num: 0,
      queryParams: {
        stationId: null,
      },

      index1: null,
      open: false,
      infoform: {},
      // 表单校验
      rules: {},
    };
  },
  created() {
    this.getDicts("integral_manage").then((response) => {
      this.discountTimeSettingOptions = response.data;
    });

    this.getDicts("date_picker").then((response) => {
      this.discountTimeTypeOptions = response.data;
    });
    this.getDicts("is_flag").then((response) => {
      this.isDiscountCouponOptions = response.data;
    });
    this.getDicts("oil").then((response) => {
      this.oilOptions = response.data;
    });
    this.getDicts("setting_rule_type").then((response) => {
      this.settingRuleTypeOptions = response.data;
    });

    selectCustomerCardSetting(this.queryParams).then((response) => {
      if (response.hasOwnProperty("data")) {
        this.settingform = response.data;
        if (
          this.settingform.cardOilsType != null &&
          this.settingform.cardOilsType != ""
        ) {
          this.cardOilsTypeList = this.settingform.cardOilsType.split(",");
        }
        if (this.settingform.discountTimeType == "1") {
          this.workDaytrue = true;
          this.moonDaytrue = false;
          this.datetrue = false;
          this.collectClickWorkDay = this.settingform.discountTime
            .split(",")
            .map(parseFloat);
        } else if (this.settingform.discountTimeType == "2") {
          this.workDaytrue = false;
          this.moonDaytrue = true;
          this.datetrue = false;
          this.collectClickCalendar = this.settingform.discountTime
            .split(",")
            .map(parseFloat);
        } else if (this.settingform.discountTimeType == "3") {
          this.workDaytrue = false;
          this.moonDaytrue = false;
          this.datetrue = true;
          if (this.settingform.discountTime != "") {
            this.pickerTime = this.settingform.discountTime.split(",");
          } else {
            this.pickerTime = null;
          }
        }
      }
    });
  },
  methods: {
    oilNameFormatter(row, column) {
      if (row.oilName === "1") {
        return "汽油";
      } else if (row.oilName === "2") {
        return "柴油";
      }
    },
    settingRuleTypeFotmat(row, column) {
      if (row.settingRuleType === "1") {
        return "按赠送金额";
      } else if (row.settingRuleType === "2") {
        return "按赠送比例";
      }
    },
    settingRuleTypeChange() {
      if (this.infoform.settingRuleType == "1") {
        this.jine = true;
        this.bili = false;
      } else if (this.infoform.settingRuleType == "2") {
        this.jine = false;
        this.bili = true;
      }
    },
    datePickerChang() {
      if (this.settingform.discountTimeType == "1") {
        this.workDaytrue = true;
        this.moonDaytrue = false;
        this.datetrue = false;
      } else if (this.settingform.discountTimeType == "2") {
        this.workDaytrue = false;
        this.moonDaytrue = true;
        this.datetrue = false;
      } else if (this.settingform.discountTimeType == "3") {
        this.workDaytrue = false;
        this.moonDaytrue = false;
        this.datetrue = true;
      }
    },
    resetInfo() {
      this.infoform = {
        id: null,
        parentId: null,
        oilName: null,
        discountAmtStart: null,
        discountAmtEnd: null,
        settingRuleType: null,
        presentAmt: null,
      };
      this.resetForm("infoform");
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.resetInfo();
      this.index1 = null;
      this.open = true;
      this.title = "添加客户电子会员卡充值优惠设置";
    },
    /** 修改按钮操作 */
    handleUpdate(index, row) {
      this.index1 = index;
      this.infoform = row;
      this.open = true;
      this.title = "修改客户电子会员卡充值优惠设置";
      this.settingRuleTypeChange();
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["settingform"].validate((valid) => {
        if (valid) {
          let flag = true;
          if (
            this.cardOilsTypeList != null &&
            this.cardOilsTypeList.length > 0
          ) {
            this.settingform.cardOilsType = this.cardOilsTypeList.toString();
          } else {
            this.settingform.cardOilsType = "";
            flag = false;
          }
          if (this.settingform.id != null) {
            let datepicker = this.settingform.discountTimeType;
            if (datepicker == "1") {
              if (
                this.collectClickWorkDay != null &&
                this.collectClickWorkDay.length > 0
              ) {
                let discountTime = null;
                for (let i = 0; i < this.collectClickWorkDay.length; i++) {
                  if (
                    !isNaN(this.collectClickWorkDay[i]) &&
                    this.collectClickWorkDay[i] != "NaN"
                  ) {
                    if (discountTime != null) {
                      discountTime =
                        discountTime + "," + this.collectClickWorkDay[i];
                    } else {
                      discountTime = this.collectClickWorkDay[i];
                    }
                  } else {
                    discountTime = discountTime;
                  }
                }
                this.settingform.discountTime = discountTime;
                discountTime = null;
              } else {
                this.settingform.discountTime = "";
              }
            } else if (datepicker == "2") {
              if (
                this.collectClickCalendar != null &&
                this.collectClickCalendar.length > 0
              ) {
                let discountTime = null;
                for (let i = 0; i < this.collectClickCalendar.length; i++) {
                  if (
                    !isNaN(this.collectClickCalendar[i]) &&
                    this.collectClickCalendar[i] != "NaN"
                  ) {
                    if (discountTime != null) {
                      discountTime =
                        discountTime + "," + this.collectClickCalendar[i];
                    } else {
                      discountTime = this.collectClickCalendar[i];
                    }
                  } else {
                    discountTime = discountTime;
                  }
                }
                this.settingform.discountTime = discountTime;
                discountTime = null;
              } else {
                this.settingform.discountTime = "";
              }
            } else {
              if (this.pickerTime != null) {
                this.settingform.discountTime = this.pickerTime.toString();
              } else {
                this.settingform.discountTime = "";
              }
            }
            updateSetting(this.settingform).then((response) => {
              this.msgSuccess("修改成功");
              this.jine = false;
              this.bili = false;
            });
          } else {
            if (this.num == 0) {
              if (datepicker == "1") {
                if (
                  this.collectClickWorkDay != null &&
                  this.collectClickWorkDay.length > 0
                ) {
                  let discountTime = null;
                  for (let i = 0; i < this.collectClickWorkDay.length; i++) {
                    if (
                      !isNaN(this.collectClickWorkDay[i]) &&
                      this.collectClickWorkDay[i] != "NaN"
                    ) {
                      if (discountTime != null) {
                        discountTime =
                          discountTime + "," + this.collectClickWorkDay[i];
                      } else {
                        discountTime = this.collectClickWorkDay[i];
                      }
                    } else {
                      discountTime = discountTime;
                    }
                  }
                  this.settingform.discountTime = discountTime;
                  discountTime = null;
                } else {
                  this.settingform.discountTime = "";
                }
              } else if (datepicker == "2") {
                if (
                  this.collectClickCalendar != null &&
                  this.collectClickCalendar.length > 0
                ) {
                  let discountTime = null;
                  for (let i = 0; i < this.collectClickCalendar.length; i++) {
                    if (
                      !isNaN(this.collectClickCalendar[i]) &&
                      this.collectClickCalendar[i] != "NaN"
                    ) {
                      if (discountTime != null) {
                        discountTime =
                          discountTime + "," + this.collectClickCalendar[i];
                      } else {
                        discountTime = this.collectClickCalendar[i];
                      }
                    } else {
                      discountTime = discountTime;
                    }
                  }
                  this.settingform.discountTime = discountTime;
                  discountTime = null;
                } else {
                  this.settingform.discountTime = "";
                }
              } else {
                if (this.pickerTime != null) {
                  this.settingform.discountTime = this.pickerTime.toString();
                } else {
                  this.settingform.discountTime = "";
                }
              }
              addSetting(this.settingform).then((response) => {
                this.msgSuccess("新增成功");
                this.num = this.num + 1;
                this.jine = false;
                this.bili = false;
              });
            } else {
              this.msgSuccess("已新增成功，如需修改请刷新页面");
            }
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(index) {
      this.settingform.detailList.splice(index, 1);
    },
    deleteItemFromArr(item) {
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] === val) {
            return i;
          }
        }
        return -1;
      };
      // 通过索引删除数组元素
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      // 删除数组元素
      this.collectClickCalendar.remove(item);
    },
    clickCalendar(item, index) {
      if (this.collectClickCalendar.indexOf(index) === -1) {
        this.collectClickCalendar.push(index);
      } else if (this.collectClickCalendar.indexOf(index) > -1) {
        this.deleteItemFromArr(index);
      }
    },
    deleteWorkDayFromArr(item) {
      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] === val) {
            return i;
          }
        }
        return -1;
      };
      // 通过索引删除数组元素
      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      // 删除数组元素
      this.collectClickWorkDay.remove(item);
    },
    clickWorkDayCalendar(item, index) {
      if (this.collectClickWorkDay.indexOf(index) === -1) {
        this.collectClickWorkDay.push(index);
      } else if (this.collectClickWorkDay.indexOf(index) > -1) {
        this.deleteWorkDayFromArr(index);
      }
    },
    cancelOpen() {
      this.infoform = {
        oilName: null,
        discountAmtStart: null,
        discountAmtEnd: null,
        settingRuleType: null,
        presentAmt: null,
      };
      this.index1 = null;
      this.resetForm("infoform");
      this.open = false;
      this.jine = false;
      this.bili = false;
    },
    save() {
      const that = this;
      this.$refs["infoform"].validate((valid) => {
        if (valid) {
          if (that.index1 != null) {
            that.handleDelete(that.index1);
          }
          that.settingform.detailList.push(that.infoform);
        }
      });
      this.cancelOpen();
    },
  },
};
</script>
